<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>product-center</title>
    <link rel="stylesheet" href="static/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="static/css/animate.min.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/product-center.css" />

    <script src="static/js/jQuery.js"></script>
    <script src="static/js/layui.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
  </head>

  <body>
    <header class="com-header"></header>
    <script>
      $(function () {
        $('.com-header').load('component/header.html'); //加载导航栏
      });
    </script>
    <main class="product-center">
      <section class="s1">
        <div class="product-center w1400">
          <div class="product-center-oneflex">
            <div class="product-center-zuomokuai">
              <div class="product-center-left">
                <div class="product-center-top">
                  <div class="product-center-top-grop">
                    <h3 class="avitas wow fadeInUp">产品中心</h3>
                    <img src="static/images/picture/xiajianto.png" alt="ctmon" />
                  </div>

                  <ul class="vnjae-two">
                    <li class="oue ouetwo nopadding active wow fadeInUp">
                      <a class="oue padd">
                        <div href="">风冷产品</div>
                        <div class="bainn1"><img src="static/images/tachnology/gouhao.webp" alt="ctmon" /></div>
                      </a>
                    </li>

                    <li class="oue ouetwo wow fadeInUp">
                      <a href="">水冷产品</a>
                      <div class="bainn1"><img src="static/images/tachnology/gouhao.webp" alt="ctmon" /></div>
                    </li>

                    <li class="oue ouetwo wow fadeInUp">
                      <a href="">螺杆产品</a>
                      <div class="bainn1"><img src="static/images/tachnology/gouhao.webp" alt="ctmon" /></div>
                    </li>

                    <li class="oue ouetwo wow fadeInUp">
                      <a href="">涡旋产品</a>
                      <div class="bainn1"><img src="static/images/tachnology/gouhao.webp" alt="ctmon" /></div>
                    </li>

                    <li class="oue ouetwo wow fadeInUp">
                      <a href="">磁悬浮产品</a>
                      <div class="bainn1"><img src="static/images/tachnology/gouhao.webp" alt="ctmon" /></div>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="product-center-bottom">
                <div class="product-center-bottom-ctn">
                  <div class="product-center-bottom-img wow fadeInUp">
                    <img src="./static/images/produte-center-img/jianbianlangtu.png" alt="ctmon" />
                  </div>
                  <div class="mengtu wow fadeInUp">
                    <p class="ppp">联系我们</p>
                    <p class="pppp">CONTACT US</p>
                  </div>
                </div>
                <div class="product-center-bottom-word wow fadeInUp">
                  <div class="product-center-bottom-word-flex">
                    <div class="product-center-bottom-word-left">
                      <img src="./static/images/produte-center-img/number.png" alt="ctmon" />
                    </div>

                    <div class="product-center-bottom-word-right">
                      <p class="word">全国服务热线</p>
                      <p class="numbe">0755-33591188</p>
                    </div>
                  </div>
                  <div class="product-center-bottom-word-bottom">
                    <ul>
                      <li>
                        <h4>联系手机</h4>
                        <p>翦先生 186 8226 5747</p>
                      </li>
                      <li>
                        <h4>企业邮箱</h4>
                        <p>0755-32937809</p>
                      </li>
                      <li>
                        <h4>公司地址</h4>
                        <p>广东省深圳市宝安区沙井沙一万安 路长兴科技园6栋</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-right-layout">
              <div class="product-center-bottom-word-right content active">
                <div class="product-center-youmokuai">
                  <div class="product-center-youmokuai-left wow fadeInUp">
                    <div class="product-swiper">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <div class="bg1 " data-src="./static/images/produte-center-img/lengshuiji-small.png">
                            <img src="./static/images/produte-center-img/lengshuiji-small.png" alt="ctmon" />
                        
                        </div>
                         
                        </div>
                        <div class="swiper-slide">
                          <div class="bg1" data-src="./static/images/produte-center-img/lengshuiji-big.png">
                            <img src="./static/images/produte-center-img/lengshuiji-small.png" alt="ctmon" />
                          
                        </div>
                        </div>
                        <div class="swiper-slide">
                          <div class="bg1" data-src="./static/images/produte-center-img/youjiantou.png">
                            <img src="./static/images/produte-center-img/lengshuiji-small.png" alt="ctmon" />
                        
                        </div>
                        </div>
                        <div class="swiper-slide">
                          <div class="bg1"  data-src="./static/images/produte-center-img/youjiantou.png">
                            <img src="./static/images/produte-center-img/lengshuiji-small.png" alt="ctmon" />
                          
                        </div>
                        </div>
                      </div>
                      <div class="bg2">
                        <img src="static/images/produte-center-img/lengshuiji-small.png" alt="ctmon"></img>
                      </div>
                    </div>
                    <div class="product-swiper-thumbs-layout">
                      <div class="product-swiper-thumbs">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <img src="./static/images/produte-center-img/small-two.png" alt="ctmon" />
                          </div>
                          <div class="swiper-slide">
                            <img src="./static/images/produte-center-img/small-img-one.png" alt="ctmon" />
                          </div>
                          <div class="swiper-slide">
                            <img src="./static/images/produte-center-img/small-two.png" alt="ctmon" />
                          </div>
                          <div class="swiper-slide">
                            <img src="./static/images/produte-center-img/small-img-one.png" alt="ctmon" />
                          </div>
                        </div>
                      </div>
                      <div class="swiper-button-prev"></div>
                      <div class="swiper-button-next"></div>
                    </div>
                   
                  </div>

                  <div class="product-center-youmokuai-right wow fadeInUp">
                    <div class="product-center-youmokuai-right-title">
                      <h3>螺杆式冷水机</h3>
                      <h4>10寸HMI + <span>Single-Chip</span></h4>
                    </div>

                    <div class="product-center-youmokuai-right-text">
                      <p>• 7~35℃温度可调</p>
                      <p>• 台湾汉钟/德国⽐泽尔螺杆压缩机</p>
                      <p>• 10⼨HMI+Single-Chip控制系统</p>
                    </div>

                    <div class="btn">
                      <a href=""><button class="form-btn">在线咨询</button></a>
                    </div>
                  </div>
                </div>
                <div class="product-introduce">
                  <div class="product-introduce-title">
                    <h3>机组介绍</h3>
                    <div class="btn-jian">
                      <div class="swiper-button-prev"></div>
                      <div class="swiper-button-next"></div>
                    </div>
                  </div>
                  <div class="swiper-introduce">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="product-introduce-text">
                          <p class="wow fadeInUp">
                            主机精选美国日本全新进口压缩机，内置安全保护，噪音低，节省电能耐用。采用R22制冷剂，制冷效果好<br
                              class="haha"
                            />
                            选用环保的R22制冷剂，我们的主机能够提供出色的制冷效果，无论是在炎热的夏季还是需要快速降温的场合，<br
                              class="haha"
                            />
                            都能迅速达到理想的温度。这样的组合，不仅保证了制冷的效率，也兼顾了对环境的关怀。
                          </p>
                          <div class="tag">01</div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="product-introduce-text">
                          <p class="wow fadeInUp">
                            主机精选美国日本全新进口压缩机，内置安全保护，噪音低，节省电能耐用。采用R22制冷剂，制冷效果好<br
                              class="haha"
                            />
                            选用环保的R22制冷剂，我们的主机能够提供出色的制冷效果，无论是在炎热的夏季还是需要快速降温的场合，<br
                              class="haha"
                            />
                            都能迅速达到理想的温度。这样的组合，不仅保证了制冷的效率，也兼顾了对环境的关怀。
                          </p>
                          <div class="tag">02</div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="product-introduce-text">
                          <p class="wow fadeInUp">
                            主机精选美国日本全新进口压缩机，内置安全保护，噪音低，节省电能耐用。采用R22制冷剂，制冷效果好<br
                              class="haha"
                            />
                            选用环保的R22制冷剂，我们的主机能够提供出色的制冷效果，无论是在炎热的夏季还是需要快速降温的场合，<br
                              class="haha"
                            />
                            都能迅速达到理想的温度。这样的组合，不仅保证了制冷的效率，也兼顾了对环境的关怀。
                          </p>
                          <div class="tag">03</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="product-introduce-tubiao">
                    <img src="./static/images/produte-center-img/01.png" alt="ctmon" />
                  </div>
                </div>
                <div class="product-cannum">
                  <div class="product-cannum-title wow fadeInUp">
                    <h3>产品参数</h3>
                  </div>
                  <div class="product-cannum-download">
                    <p>点击下载我们的文件</p>
                  </div>
                </div>
                <div class="product-cannum-bottom-big-img wow fadeInUp">
                  <img src="static/images/banner/biaoge.png" alt="ctmon" />
                </div>
                <div class="content">内容2</div>
                <div class="content">内容3</div>
                <div class="content">内容4</div>
                <div class="content">内容5</div>
                <div class="content">内容6</div>
                <div class="content">内容7</div>
                <div class="content">内容8</div>
                <div class="content">内容9</div>
                <div class="content">内容10</div>
                <div class="content">内容11</div>
                <div class="content">内容12</div>
                <div class="content">内容13</div>
                <div class="content">内容14</div>
                <div class="content">内容15</div>
                <div class="content">内容15</div>
                <div class="content">内容15</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <div class="form-pop">
      <div class="form-box">
        <div class="form-box-title">立即联系我们</div>
        <!-- <div class="form-box-desc">立即联系我们的销售团队，了解我们的清洗机。</div> -->
        <div id="pop_form" class="layui-form">
          <div>
            <input type="text" name="user_name" placeholder="用户名*" required="" />
          </div>
          <div>
            <input type="text" name="user_tel" placeholder="公司名称*" required="" />
          </div>
          <div>
            <input type="text" name="user_email" placeholder="手机号*" required="" />
          </div>
          <div>
            <input type="text" name="user_email" placeholder="邮箱*" required="" />
          </div>
          <div>
            <input type="text" name="user_email" placeholder="留言信息*" required="" />
          </div>

          <div>
            <button class="form-box-submit popSubmitBtn">提交</button>
          </div>
        </div>
        <div class="form-close-btn">X</div>
      </div>
    </div>
    <footer class="com-footer"></footer>
    <script>
      $(function () {
        $('.com-footer').load('component/footer.html'); //加载足部
      });
    </script>
    <script src="static/js/wow.js"></script>
    <script src="static/js/product-center.js"></script>
    <script src="static/js/public.js" defer></script>
    <script src="static/js/jquery.counterup.js"></script>
    <script>
        if(window.innerWidth>768){
          // const swiper_product=document.querySelector(".product-swiper")
          // const bg1 = document.querySelectorAll('.bg1')
          // const bg2 = document.querySelector('.bg2')
          // const zoom=document.querySelector('.product-center-youmokuai-left')
          // bg2.style.width=zoom.offsetWidth+'px'
          // bg2.style.height=swiper_product.offsetHeight+'px'
          // const img = document.querySelector('.bg2 img')
          // let item=document.querySelector(".product-swiper .swiper-slide-active .bg1");
          // zoom.onmouseenter = function () {
          //   const item=document.querySelector(".product-swiper .swiper-slide-active .bg1");
          //   const bg1_react= item.getBoundingClientRect();
          //   img.style.width = bg1_react.width*2 + 'px'
          //   img.style.height = bg1_react.height*2 + 'px'
          //   img.src=item.getAttribute('data-src')
          //   bg2.style.display = 'block'
          // }
          // zoom.onmousemove = function (e) {
          //   console.log(e.offsetX,e.offsetY);
          //   img.style.left =  -2*e.offsetX +'px';
          //   img.style.top = -2*e.offsetY  + 'px';
          // }
          // zoom.onmouseleave = function () {
          //       bg2.style.display = 'none'
          //   }
    


          // 获取所需的 DOM 元素

const bg2 = document.querySelector(".bg2");
const zoom = document.querySelector(".product-swiper");
const img = document.querySelector(".bg2 img");


// 鼠标进入 zoom 区域时触发
zoom.addEventListener("mouseenter", () => {
  const activeBg1 = document.querySelector(".swiper-slide-active .bg1");
  if (!activeBg1) return; // 若找不到活动滑块则退出
  // 获取当前 bg1 的尺寸，用于计算缩放后的尺寸
  const bg1Rect = zoom.getBoundingClientRect();
  img.style.width = `${bg1Rect.width * 3}px`;
  // 设置放大镜的图片
  img.src = activeBg1.getAttribute("data-src");
  // 显示 bg2
  bg2.style.display = "block";
});

// 鼠标在 zoom 区域内移动时触发
zoom.addEventListener("mousemove", (e) => {
  // 根据鼠标位置调整图片偏移
  img.style.transform = `translate(-${e.layerX * 3}px, -${e.layerY * 3}px)`;
});

zoom.addEventListener("mouseleave", () => {
  bg2.style.display = "none"; // 隐藏 bg2
});
      }
      
   


      var thumbsSwiper = new Swiper('.product-swiper-thumbs', {
        spaceBetween: 10,
        slidesPerView: 3,
        normalizeSlideIndex: false,
        slideToClickedSlide: true,
        watchSlidesVisibility: true, //防止不可点击,
        on: {
          slideChange: function () {
            gallerySwiper.slideTo(this.activeIndex);
          }
        }
      });
      var gallerySwiper = new Swiper('.product-swiper', {
        spaceBetween: 10,
        allowTouchMove: false,
        navigation: {
          nextEl: '.product-swiper-thumbs-layout .swiper-button-next',
          prevEl: '.product-swiper-thumbs-layout .swiper-button-prev'
        },
        on: {
          slideChange: function () {
            thumbsSwiper.slideTo(this.activeIndex);
          }
        }
      });

      new Swiper('.swiper-introduce', {
        slidesPerView: 1,
        navigation: {
          nextEl: '.product-introduce .swiper-button-next',
          prevEl: '.product-introduce .swiper-button-prev'
        }
      });
    </script>
  </body>
</html>
